<template>
  <div>
    <vue-ellipse-progress
      :progress="tasksDonePercent"
      color="#7579ff"
      empty-color="#324c7e"
      :size="180"
      :thickness="5"
      :empty-thickness="6"
      lineMode="in 10"
      :legend-value="tasksDone"
      animation="loop 700 1000"
      fontSize="1.5rem"
      font-color="black"
      dash="5"
    >
      <span slot="legend-value"> / 200</span>
      <span slot="legend-caption">TASKS DONE</span>
    </vue-ellipse-progress>
  </div>
</template>

<script>
export default {
  data: () => ({
    tasksDone: 125,
  }),
  computed: {
    tasksDonePercent() {
      return this.tasksDone/200*100;
    },
  },
};
</script>

<style>
</style>